<%--
  Created by IntelliJ IDEA.
  User: liberatorch
  Date: 2022-04-14
  Time: 12:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    session.setAttribute("loginRequestUrl",request.getContextPath()+"/LoginServlet");
%>
<html lang="en" class="light-style customizer-hide" dir="ltr" data-theme="theme-default" data-assets-path="../../assets/" data-template="vertical-menu-template-free">
<head>
    <title>登录·众合汽配数据通</title>
    <jsp:include page="__header.jsp"/>
    <link rel="stylesheet" href="assets/css/page-auth.css" />
</head>

<body>
<!-- Content -->

<div class="container-xxl">
    <div class="authentication-wrapper authentication-basic container-p-y">
        <div class="authentication-inner">
            <!-- Register -->
            <div class="card">
                <div class="card-body">
                    <!-- Logo -->
                    <div class="app-brand justify-content-center">
                        <a href="index.html" class="app-brand-link gap-2">
                  <span class="app-brand-logo demo">
                    <i class="fa fa-car"></i>
                  </span>
                            <span class="app-brand-text demo text-body fw-bolder" style="font-size:20px">众合汽配</span>
                        </a>
                    </div>
                    <!-- /Logo -->
                    <h4 class="mb-2" id="title">登录</h4>
                    <form id="form" class="mb-3">
                        <div class="mb-3">
                            <label for="email" class="form-label">用户名</label>
                            <input
                                    type="text"
                                    class="form-control"
                                    id="email"
                                    name="usr"
                                    placeholder="用户名"
                                    autofocus
                            />
                        </div>
                        <div class="mb-3 form-password-toggle">
                            <div class="d-flex justify-content-between">
                                <label class="form-label" for="password">密码</label>
                            </div>
                            <div class="input-group input-group-merge">
                                <input
                                        type="password"
                                        id="password"
                                        class="form-control"
                                        name="pwd"
                                        placeholder="密码"
                                        aria-describedby="password"
                                />
                                <span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="remember-me" />
                                <label class="form-check-label" for="remember-me"> 自动登录 </label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <button class="btn btn-primary d-grid w-100" type="button" id="submitButton" onclick="login()">登录</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<jsp:include page="__footer.jsp"/>
<script>
    function login(){
        let form = $('#form');
        let formData = form.serialize();
        console.log(formData);
        $.ajax({
            url: '${loginRequestUrl}',
            type: 'POST',
            data: formData,
            contentType: 'application/json',
            dataType: 'text',
            success : (resp)=>{
                if(resp==="true")
                    window.location.href='index.jsp';
                else
                    $('#title').text('用户名与密码不匹配！');

            },
            error : ()=>{
                $('#title').text('用户名与密码不匹配！');
            }
        });
    }
</script>
</body>
</html>
